<template>

    <button @click="changeNode">修改节点颜色事件</button>

    <h2>连接箭头的样式，链路路由应避开节点</h2>
    <h2>节点定位： loc: new go.Point(100, 100)</h2>

    <div id="chart-diagram" style="background-color: whitesmoke; width: 1000px; height: 1000px;">
    </div>


</template>

<script setup>
    import {onMounted} from 'vue';
    import go from "gojs";

    let myDiagram = null;


    const changeNode = () => {
        var data = myDiagram.model.findNodeDataForKey("Delta");
        // 这个方式可以更新
        if (data !== null) myDiagram.model.setDataProperty(data, "color", "red");
    }

    const init = () => {

        const $ = go.GraphObject.make

        myDiagram = new go.Diagram("chart-diagram", {
            'grid.visible': true, // 显示网格
            'clickCreatingTool.archetypeNodeData': {category: 'Normal', text: '新节点', notice: ''}, // 双击新建节点(可以写入节点的默认信息)；；
            'toolManager.hoverDelay': 100, // tooltip提示显示延时
            'toolManager.toolTipDuration': 10000, // tooltip持续显示时间
            allowMove: true, // 允许拖动画板
            allowDragOut: true, // 允许拖拽节点
            allowDelete: true, // 允许删除节点
            allowCopy: true, // 允许复制节点
            allowClipboard: true, // 允许粘贴节点

        });


    myDiagram.nodeTemplate =
                    $(go.Node, "Auto",{selectionAdorned: false//不显示选中框
                },
                        new go.Binding("location", "loc"),  // 绑定的属性值为location,绑定的值为nodeDataArray里的loc值
                        $(go.Shape,
                            {
                                figure: "RoundedRectangle",
                                fill: "white"
                            },  // default Shape.fill value
                            new go.Binding("fill", "color")),  // 把数组中的color绑定到Shape的fill上
                        $(go.TextBlock,
                            {margin: 5},
                            new go.Binding("text", "key"))  // // 把数组中的key值绑定到TextBlock的text上
                    );


                myDiagram.linkTemplate =
                    $(go.Link,
                        {
                            // 链路路由应避开节点
                            routing: go.Link.AvoidsNodes,
                            corner: 10,
                            curve: go.Link.JumpGap
                        },

                        $(go.Shape,
                            new go.Binding("stroke", "color"),  // shape.stroke = data.color
                            new go.Binding("strokeWidth", "thick")),  // shape.strokeWidth = data.thick
                        $(go.Shape,
                            {toArrow: "OpenTriangle", fill: null},
                            new go.Binding("stroke", "color"),  // shape.stroke = data.color
                            new go.Binding("strokeWidth", "thick"))  // shape.strokeWidth = data.thick

                    );

                var nodeDataArray = [
                    {key: "Alpha", color: "lightblue", loc: new go.Point(100, 100)},
                    {key: "Beta", color: "yellow", loc: new go.Point(100, 250)},
                    {key: "Gamma", color: "orange"},
                    {key: "Delta", color: "lightgreen"}
                ];


                var linkDataArray = [
                    {from: "Alpha", to: "Beta", color: "blue", thick: 2}
                ];


                myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);



    };

    onMounted(() => {
        init();
    });


</script>

<style scoped>

</style>